<template>
  <!-- <h2>已收费</h2> -->
  <workStatistics :todayData="today"></workStatistics>
  <zsearch v-loading="loading">
    <template #title>
      <span>已收费</span>
    </template>
      <template #date>
        <el-date-picker
            class="date-1"
            type="date"
            v-model="day"
            @change="handleChangeDate"
            placeholder="选择日期">
        </el-date-picker>
      </template>
      <template #select>
        <el-input class="input-1" v-model="name" placeholder="患者"></el-input>
      </template>
      <template #btns>
        <el-button class="btn-1" @click="hanledSearch">查询</el-button>
	      <el-button class="btn-2">导出</el-button>
      </template>
      <template #table>
        <ztable 
          :tableData='data' 
          :strucs='columns'
          :height="'100%'"
          :isshowOperation="true"
          @onToDetail="onToDetail"

        >
        <template #default="slotScope">
          <el-button type="text" class="operation" v-jurisdiction="'pay:order:collection:list'" @click="goChargeHistory(slotScope.rowData)" >收费历史</el-button>
        </template>
        </ztable>
      </template>
      <template #page>
        <zpage 
            :currentPage="current" 
            :total="total"
            :pageSize="size"
            @handleSizeChange="handleSizeChange" 
            @handleCurrentChange="handleCurrentChange"
        ></zpage>
      </template>
    </zsearch>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, ref } from '@vue/runtime-core'

import useRequet, { RespData } from "../../hook/network"
import { debounce } from "../../utils/debounce"

import useConfgin from '../../hook/getconfig'
import { getNowDate } from '../../utils/nowDate'

import ztable from '@components/Table/index.vue'
import zpage from '@components/pagination/pagination.vue'
import zsearch from '@components/search/search.vue'
import workStatistics from "../../components/workStatistics/work.vue"
import useSetAddLog from "../../hook/setAddLog"
import { ElMessage } from 'element-plus'
import {useRouter} from "vue-router"


const configID = 556
export default defineComponent({
  name: 'Charged',
  components: {
    ztable,
    zpage,
    zsearch,

    workStatistics
  },
  setup() {
    const router = useRouter()
    let search = reactive({
      day: getNowDate(),
      name:'',
      current: 1,
      size: 10,
      total: 0,

      loading: false
    })
    let today = reactive({
      todayNewCustomer: 0,
      todayNewSub: 0,
      todayNewCollection: 0,
      todayNewAccessLog: 0,
      todayNewSickMedicalRecords: 0
    })
    const data = ref([])
    const { groupDataList } = useConfgin(configID)
    const columns = groupDataList.value;

    const request = useRequet({ path: "" });


    const req = () => {
      search.loading = true
      request.sendRequest({
        address: '/pay/order/hasChargeList',
        params: search || {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取失败')
					data.value = resp.data.records || []
          search.total = resp.data.total
          search.current = resp.data.current
          console.log(data)
          data.value.map((item:any,index) => {
            item.index = ++index
          })

          search.loading = false
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取失败')
          
        },
        method: "POST",
      })
    }
    req()

    const handleChangeDate = (d: Date) => {
      search.day = getNowDate(d)
    }

    // 去详情
    const onToDetail = (id: number) => {
      useSetAddLog(id)
      router.push(`/allPatientDetails/${id}/patient`)
    }
    const getTodayStatistics = () => {
      request.sendRequest({
        address: '/pay/order/todayStatistics',
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取失败')
	
          console.log(resp.data)
          today.todayNewCustomer = resp.data.todayNewCustomer
          today.todayNewSub = resp.data.todayNewSub
          today.todayNewCollection = resp.data.todayNewCollection
          today.todayNewAccessLog = resp.data.todayNewAccessLog
          today.todayNewSickMedicalRecords = resp.data.todayNewSickMedicalRecords

          search.loading = false
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取失败')
          
        },
        method: "POST",
      })
    }
    getTodayStatistics()

    const debounceRefresh = debounce(req, 1000)
    //搜索
    const hanledSearch = () => {
      debounceRefresh()
    }

    // 分页
    const handleCurrentChange = (val: number) => {
			search.current = val
      req()
			console.log('handleCurrentChange', val)
		}
    const handleSizeChange = (val: number) => {
      search.size = val
      req()
			console.log('handleSizeChange', val)
		}


    // 去收费历史
    const goChargeHistory = (rowData: any) => {
      console.log(rowData, '去收费历史')
      let id = rowData.customerId
      router.push({path:`/allPatientDetails/${id}/chargeModel`, query: {type: 4}})
      
    }



    return {
      onToDetail,
      data,
      columns,
      ...toRefs(search),
      today,

      handleCurrentChange,
      handleSizeChange,
      hanledSearch,
      handleChangeDate,

      goChargeHistory
    }
  }
})
</script>
